<template>
  <Echart :options="option" :width="width" :height="height"></Echart>
</template>

<script setup lang="ts">
import Echart from "@/components/Echart.vue";
import { ref } from "vue";

const width = "100%";
const height = "100%";
let option = ref({
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    boundaryGap: false,
    axisLine: {
      onZero: false,
      lineStyle: {
        color: "#4b87a9",
      },
    },
  },
  yAxis: {
    type: "value",
    axisLine: {
      onZero: false,
      lineStyle: {
        color: "#4b87a9",
      },
    },
    splitLine: {
      //网格线
      show: false,
    },
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "bar",
      barWidth: "40%",
      borderRadius: "10px",
      itemStyle: {
        //柱状颜色和圆角
        color: "rgba(59, 130, 246)",
        barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
      },
    },
  ],
});
</script>

<style scoped></style>
